// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

// spacers
$spacer-3xl: var(--spacer-3xl);
$spacer-2xl: var(--spacer-2xl);
$spacer-xl: var(--spacer-xl);
$spacer-lg: var(--spacer-lg);
$spacer-md: var(--spacer-md);
$spacer-sm: var(--spacer-sm);
$spacer-xs: var(--spacer-xs);
$spacer-2xs: var(--spacer-2xs);

// container
$container-padding: var(--container-padding);

// border
$border-width: 2px;
@mixin short-dividers($border-color) {
    // the idea here is that all the items get a top and bottom border and the borders over lap, the ends of the border are transparent so a background color change shows through
    border-image-source: linear-gradient(90deg, transparent $container-padding, $border-color $container-padding, $border-color calc(100% - $container-padding), transparent calc(100% - $container-padding));
    border-image-slice: 2;
    border-top-width: $border-width;
    border-bottom-width: $border-width;
    border-style: solid;
    margin-top: $border-width * -1;
}
